<template>
    <view class="u-demo">
        <view class="u-demo-wrap">
            <view class="u-demo-title">演示效果</view>
            <view class="u-demo-area">
                <u-read-more @open="open" @close="close" :toggle="toggle" :show-height="showHeight" ref="uReadMoreRef">
                    <!-- u-parse组件在微信小程序渲染慢，支付宝小程序rich-text不支持nodes属性 -->
                    <!-- #ifdef MP-ALIPAY -->
                    <!-- #endif -->
                    <!-- #ifndef MP-ALIPAY -->
                    <rich-text :nodes="content"></rich-text>
                    <!-- #endif -->
                </u-read-more>
            </view>
        </view>
        <view class="u-config-wrap">
            <view class="u-config-title u-border-bottom"> 参数配置 </view>
            <view class="u-config-item">
                <view class="u-item-title">超出高度隐藏</view>
                <u-subsection current="1" :list="['100', '200', '400']" @change="showHeightChange"></u-subsection>
            </view>
            <view class="u-config-item">
                <view class="u-item-title">展开后可关闭</view>
                <u-subsection current="1" :list="['是', '否']" @change="toggleChange"></u-subsection>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const content = ref(`浔阳江头夜送客，枫叶荻花秋瑟瑟。主人下马客在船，举酒欲饮无管弦。醉不成欢惨将别，别时茫茫江浸月。
					忽闻水上琵琶声，主人忘归客不发。寻声暗问弹者谁，琵琶声停欲语迟。移船相近邀相见，添酒回灯重开宴。千呼万唤始出来，犹抱琵琶半遮面。转轴拨弦三两声，未成曲调先有情。弦弦掩抑声声思，似诉平生不得志。低眉信手续续弹，说尽心中无限事。轻拢慢捻抹复挑，初为《霓裳》后《六幺》。大弦嘈嘈如急雨，小弦切切如私语。嘈嘈切切错杂弹，大珠小珠落玉盘。间关莺语花底滑，幽咽泉流冰下难。冰泉冷涩弦凝绝，凝绝不通声暂歇。别有幽愁暗恨生，此时无声胜有声。银瓶乍破水浆迸，铁骑突出刀枪鸣。曲终收拨当心画，四弦一声如裂帛。东船西舫悄无言，唯见江心秋月白。
					沉吟放拨插弦中，整顿衣裳起敛容。自言本是京城女，家在虾蟆陵下住。十三学得琵琶成，名属教坊第一部。曲罢曾教善才服，妆成每被秋娘妒。五陵年少争缠头，一曲红绡不知数。钿头银篦击节碎，血色罗裙翻酒污。今年欢笑复明年，秋月春风等闲度。弟走从军阿姨死，暮去朝来颜色故。门前冷落鞍马稀，老大嫁作商人妇。商人重利轻别离，前月浮梁买茶去。去来江口守空船，绕船月明江水寒。夜深忽梦少年事，梦啼妆泪红阑干。
					我闻琵琶已叹息，又闻此语重唧唧。同是天涯沦落人，相逢何必曾相识！我从去年辞帝京，谪居卧病浔阳城。浔阳地僻无音乐，终岁不闻丝竹声。住近湓江地低湿，黄芦苦竹绕宅生。其间旦暮闻何物？杜鹃啼血猿哀鸣。春江花朝秋月夜，往往取酒还独倾。岂无山歌与村笛？呕哑嘲哳难为听。今夜闻君琵琶语，如听仙乐耳暂明。莫辞更坐弹一曲，为君翻作《琵琶行》。感我此言良久立，却坐促弦弦转急。凄凄不似向前声，满座重闻皆掩泣。座中泣下谁最多？江州司马青衫湿。`);
const showHeight = ref(200);
const toggle = ref(false);
const uReadMoreRef = ref(null);

function showHeightChange(index: number) {
    showHeight.value = index === 0 ? 100 : index === 1 ? 200 : 400;
}

function toggleChange(index: number) {
    toggle.value = index === 0 ? true : false;
}

function open() {
    // console.log('open');
}

function close() {
    // console.log('close');
}
</script>

<style lang="scss" scoped>
// 通过/deep/样式穿透去控制组件的内容
.wrap ::v-deep .u-content {
    color: #666 !important;
}
</style>
